<script>
export default {
  name: 'x-tabbar-item',
  props: ['id'],
}
</script>
<template lang="pug">
.x-tabbar-item(@click="$parent.$emit('input', id)" :class="{'x-tabbar-item__active': this.$parent.value === this.id}")
  .x-tabbar-item__text
    slot
</template>
<style lang="stylus" scoped>
.x-tabbar-item
  flex 1
  text-align center
  cursor pointer
  &.x-tabbar-item__active
    .x-tabbar-item__text
      color #FFF
      &:after
        transform scale(1)
  .x-tabbar-item__text
    position relative
    display inline-block
    color #ed8c80
    &:after
      display inline-block
      content ''
      position absolute
      bottom 13px
      left 0
      width 100%
      height 2px
      background-color #FFF
      transform scale(0)
      transition all .3s ease
</style>

